<!--
- Author:   .
- Date:    2017/8/2 0002.
- File:    index.
-->
<template>
  <div class="login_bg">
    <!--<div class="logo2" style="text-align: center; font-size: 26px; color: #f83166;width: 100%; margin: 0; padding: 2rem 0">云南云香会员平台</div>-->
    <div class="logo2" style="text-align: center; font-size: 26px; color: #f83166;width: 100%; margin: 0; padding: 1rem 0">
      <img src="../../assets/images/message_logo.png" style="width: 250px">
    </div>
    <div class="login_cont">
      <div class="login_ipt">
        <input type="tel" placeholder="手机号码" v-model="mobile">
      </div>
      <div>
        <div class="login_ipt">
          <input type="text" placeholder="填写真实姓名" v-model="name">
        </div>
        <div class="login_ipt">
          <input type="password" placeholder="设置6位密码，数字或字母" v-model="pwd">
        </div>
        <div class="login_ipt">
          <input type="password" placeholder="确认密码" v-model="pwdConfirm">
        </div>
      </div>
      <div class="login_ipt">
        <input type="tel" placeholder="填写上级邀请码" v-model="fkmid" @blur="getInviterName">
        <span v-show="inviterName" style="padding: 0 0 10px 10px; font-size: 14px;">{{inviterName}}</span>
      </div>
      <div class="login_ipt" style="position: relative">
        <input type="text" placeholder="图形验证码" v-model="imgCode">
        <div style="position: absolute; right: 0; top: 8px;width: 120px; height: 27px; line-height: 26px; border: 1px solid #aaa">
          <img style="width: 90px; height: 26px;" :src="imgCodeSrc" alt="">
          <span style=" position: absolute; right: 0; top: 0; display: inline-block; height: 26px; width: 30px; line-height: 26px;text-align: center" @click="getImgCode">刷新</span>
        </div>
      </div>
      <div class="login_ipt2">
        <input style="color: #333" type="tel" placeholder="短信验证码" v-model="code"><label>
        <span>
        <a href="javascript:void(0)" style="color: #E67A7E;">
          <message-code type="2" :tel="mobile" :imgcode="imgCode" :sended-style="sendedStyle" :callback="handleMessageCode"></message-code>
        </a>
        </span>
      </label>
      </div>
      <div style="text-align: center; margin-bottom: 10px; color: red; font-size: 15px;">
        说明：会员注册年龄限18-70周岁。
      </div>
      <div class="login_btn">
        <button style="background-color: #E67A7E;" @click="login">注册</button>
      </div>
      <div style="text-align: right; padding:15px 0; margin: 10px 0;" @click="gotoLoginPwd">
        返回登录
      </div>
    </div>
  </div>
</template>

<script>
  import messageCode from '../../components/message-code.vue'
  import {mapModules} from 'vuet'

  export default {
    mixins: [
      mapModules({wxInfo: 'wxInfo'})
    ],
    beforeRouteEnter(to, from, next) {
      if (!document.body.classList.contains('login_bg')) {
        document.body.classList.add('login_bg')
      }
      next()
    },
    beforeRouteLeave(to, from, next) {
      if (to.name != 'login-password' && to.name != 'login-bind') {
        document.body.classList.remove('login_bg')
      }
      next()
    },
    components: {
      'message-code': messageCode
    },
    data() {
      return {
        hostName: 'http://' + window.location.hostname,
        fkmid: '',
        inviterName: '',
        mobile: '',
        imgCode: '', // 图片验证码
        imgCodeSrc: '', // 图片验证码图片地址
        code: '',
        name: '',
        pwd: '',
        pwdConfirm: '',
        sendedStyle: {color: '#595757'},
        isNewMember: false // 是否新用户
      }
    },
    created() {
      this.imgCodeSrc = this.hostName + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
    },
    methods: {
      getInviterName() {
        this.$request.getMemberInfoById(this.fkmid).then(data => {
          if (data.member_name) {
            this.inviterName = data.member_name
          } else {
            this.inviterName = '该邀请人不存在'
          }
        }).catch(e => {
          console.log('邀请人错误', e)
        })
      },
      getImgCode() {
        this.imgCodeSrc = this.hostName + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
      },
      gotoLoginPwd() {
        this.$router.replace({name: 'login-password'})
      },
      login() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.code == '') {
          this.$toast('请输入短信验证码')
          return
        }
        if (this.isNewMember) {
          if (!this.fkmid) {
            this.$toast('请输入邀请码')
            return
          }
          if (!this.pwd) {
            this.$toast('请设置密码')
            return
          }
          if (!this.name) {
            this.$toast('请输入姓名')
            return
          }
          if (!this.$validator.pwd(this.pwd)) {
            this.$toast('请设置6位数字密码')
            return
          }
          if (!this.pwdConfirm) {
            this.$toast('请输入确认密码')
            return
          }
          if (this.pwd != this.pwdConfirm) {
            this.$toast('两次输入的密码不一致')
            return
          }
        }
        this.$request.loginByMessage(this.mobile, this.code, this.name, this.fkmid, this.pwd).then(data => {
          this.$storage.setKey(data.key)
          this.$toast('您的账号：' + data.member_id, 5000)
          this.$router.replace({name: 'my'})
        }).catch(e => {
          this.$toast('失败:' + e.msg)
        })
      },
      wxLogin() {
        this.$native.weixinLogin().then(wxInfo => {
          console.log('微信登录成功', wxInfo)
          this.wxInfo = wxInfo
          this.$request.getKeyByUnionId(wxInfo.unionid).then(data => {
            console.log('根据unionid获取用户信息', data)
            if (data.key) {
              this.$storage.setKey(data.key)
              this.$router.replace({name: 'my', query: {fkmid: this.fkmid}})
            } else {
              this.$router.replace({name: 'login-bind'})
            }
          })
        }).catch(e => {
          this.$toast('微信登录失败:' + e.msg)
        })
      },
      handleMessageCode(code) {
        if (code.mp == '0') {
          this.isNewMember = true
        } else {
          this.isNewMember = false
        }
      }
    }
  }
</script>

<style>

</style>
